<template>
	<view class="con size24">
		<view class="bgfff pg30 ra30-20">
			
		<view class="size32  color222"><text class="bold">元音</text><text class="color666 size26">（20个）</text></view>
		<view class="flex">
			<view class="mt25 mr10 size28">长元音</view>
			<view class="flex-a-i flex1 flex-wrap">
				<view @click="tapyin(item,index,1)" :class="{active:index ==tindex1}" class="pg5-20 bgF3F5F7 ra10 mr10 ml10 mt20" :key="index" v-for="(item,index) in chang">{{item.text}}</view>
			</view>
		</view>
		<view class="flex mt20">
			<view class="mt25 mr10 size28">短元音</view>
			<view class="flex-a-i flex1 flex-wrap">
				<view class="pg5-20 bgF3F5F7 ra10 mr10 ml10 mt20"  @click="tapyin(item,index,2)" :class="{active:index ==tindex2}" :key="index" v-for="(item,index) in duan">{{item.text}}</view>
			</view>
		</view>
		<view class="flex mt20">
			<view class="mt25 mr10 size28">双元音</view>
			<view class="flex-a-i flex1 flex-wrap">
				<view class="pg5-20 bgF3F5F7 ra10 mr10 ml10 mt20" @click="tapyin(item,index,3)" :class="{active:index ==tindex3}" :key="index" v-for="(item,index) in shuang">{{item.text}}</view>
			</view>
		</view>
		
	</view>
	<view class="bgfff pg30 ra30-20 mt20">
		<view class="size32  color222"><text class="bold">辅音</text><text class="color666 size28">（26个）</text></view>
		<view class="flex mt20">
			<view class="mt25 mr10 size28">清辅音</view>
			<view class="flex-a-i flex1 flex-wrap">
				<view class="pg5-20 bgF3F5F7 ra10 mr10 ml10 mt20" @click="tapyin(item,index,4)" :class="{active:index ==tindex4}" :key="index" v-for="(item,index) in qing">{{item.text}}</view>
			</view>
		</view>
		<view class="flex mt20">
			<view class="mt25 mr10 size28">浊辅音</view>
			<view class="flex-a-i flex1 flex-wrap">
				<view class="pg5-20 bgF3F5F7 ra10 mr10 ml10 mt20" @click="tapyin(item,index,5)" :class="{active:index ==tindex5}" :key="index" v-for="(item,index) in zhou">{{item.text}}</view>
			</view>
		</view>
		<view class="flex mt20">
			<view class="mt25 mr10 size28">清辅音</view>
			<view class="flex-a-i flex1 flex-wrap">
				<view class="pg5-20 bgF3F5F7 ra10 mr10 ml10 mt20" @click="tapyin(item,index,6)" :class="{active:index ==tindex6}" :key="index" v-for="(item,index) in qing1">{{item.text}}</view>
			</view>
		</view>
		<view class="flex mt20">
			<view class="mt25 mr10 size28">浊辅音</view>
			<view class="flex-a-i flex1 flex-wrap">
				<view class="pg5-20 bgF3F5F7 ra10 mr10 ml10 mt20" @click="tapyin(item,index,7)" :class="{active:index ==tindex7}" :key="index" v-for="(item,index) in zhou1">{{item.text}}</view>
			</view>
		</view>
		<view class="flex mt20">
			<view class="mt25 mr10 size28">鼻音</view>
			<view class="flex-a-i flex1 flex-wrap">
				<view class="pg5-20 bgF3F5F7 ra10 mr10 ml10 mt20" @click="tapyin(item,index,8)" :class="{active:index ==tindex8}" :key="index" v-for="(item,index) in bing">{{item.text}}</view>
			</view>
		</view>
		<view class="flex mt20">
			<view class="mt25 mr10 size28">半元音</view>
			<view class="flex-a-i flex1 flex-wrap">
				<view class="pg5-20 bgF3F5F7 ra10 mr10 ml10 mt20" @click="tapyin(item,index,9)" :class="{active:index ==tindex9}" :key="index" v-for="(item,index) in ban">{{item.text}}</view>
			</view>
		</view>
		<view class="flex mt20 pb20">
			<view class="mt25 mr10 size28">其他辅音</view>
			<view class="flex-a-i flex1 flex-wrap">
				<view class="pg5-20 bgF3F5F7 ra10 mr10 ml10 mt20" @click="tapyin(item,index,10)" :class="{active:index ==tindex10}" :key="index" v-for="(item,index) in qita">{{item.text}}</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tindex1:-1,
				tindex2:-1,
				tindex3:-1,
				tindex4:-1,
				tindex5:-1,
				tindex6:-1,
				tindex7:-1,
				tindex8:-1,
				tindex9:-1,
				tindex10:-1,
				chang:[
					{text:"/iː/",aurl:"http://120.27.207.15:9000/baozou-word/audio/1cs.mp3"},
					{text:"/ɑː/",aurl:"http://120.27.207.15:9000/baozou-word/audio/12cs.mp3"},
					{text:"/uː/",aurl:"http://120.27.207.15:9000/baozou-word/audio/8cs.mp3"},
					{text:"/ɔː/",aurl:"http://120.27.207.15:9000/baozou-word/audio/10cs.mp3"},
					{text:"/ɜː/",aurl:"http://120.27.207.15:9000/baozou-word/audio/5cs.mp3"},
				],
				duan:[
					{text:"/ɪ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/2cs.mp3"},
					{text:"/ə/",aurl:"http://120.27.207.15:9000/baozou-word/audio/6cs.mp3"},
					{text:"/ʊ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/9cs.mp3"},
					{text:"/ʌ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/7cs.mp3"},
					{text:"/e/",aurl:"http://120.27.207.15:9000/baozou-word/audio/3cs.mp3"},
					{text:"/ɒ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/11cs.mp3"},
					{text:"/æ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/4cs.mp3"},
				],
				shuang:[
					{text:"/eɪ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/13cs.mp3"},
					{text:"/aɪ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/14cs.mp3"},
					{text:"/ɔɪ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/15cs.mp3"},
					{text:"/əʊ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/16cs.mp3"},
					{text:"/aʊ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/17cs.mp3"},
					{text:"/ɪə/",aurl:"http://120.27.207.15:9000/baozou-word/audio/18cs.mp3"},
					{text:"/eə/",aurl:"http://120.27.207.15:9000/baozou-word/audio/19cs.mp3"},
					{text:"/ʊə/",aurl:"http://120.27.207.15:9000/baozou-word/audio/20cs.mp3"},
				],
				
				qing:[
					{text:"/p/",aurl:"http://120.27.207.15:9000/baozou-word/audio/21cs.mp3"},
					{text:"/p/",aurl:"http://120.27.207.15:9000/baozou-word/audio/22cs.mp3"},
					{text:"/k/",aurl:"http://120.27.207.15:9000/baozou-word/audio/23cs.mp3"},
					{text:"/f/",aurl:"http://120.27.207.15:9000/baozou-word/audio/24cs.mp3"},
					{text:"/θ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/27.mp3"},
					{text:"/s/",aurl:"http://120.27.207.15:9000/baozou-word/audio/25.mp3"},
				],
				zhou:[
					{text:"/b/",aurl:"http://120.27.207.15:9000/baozou-word/audio/32cs.mp3"},
					{text:"/d/",aurl:"http://120.27.207.15:9000/baozou-word/audio/33cs.mp3"},
					{text:"/g/",aurl:"http://120.27.207.15:9000/baozou-word/audio/34cs.mp3"},
					{text:"/v/",aurl:"http://120.27.207.15:9000/baozou-word/audio/35cs.mp3"},
					{text:"/ð/",aurl:"http://120.27.207.15:9000/baozou-word/audio/38cs.mp3"},
					{text:"/z/",aurl:"http://120.27.207.15:9000/baozou-word/audio/36cs.mp3"},
				],
				qing1:[
					{text:"/ʃ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/26cs.mp3"},
					{text:"/tʃ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/29cs.mp3"},
					{text:"/ts/",aurl:"http://120.27.207.15:9000/baozou-word/audio/31cs.mp3"},
					{text:"/tr/",aurl:"http://120.27.207.15:9000/baozou-word/audio/30cs.mp3"},
					],
				zhou1:[
					{text:"/ʒ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/37cs.mp3"},
					{text:"/dʒ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/40cs.mp3"},
					{text:"/dz/",aurl:"http://120.27.207.15:9000/baozou-word/audio/42cs.mp3"},
					{text:"/dr/",aurl:"http://120.27.207.15:9000/baozou-word/audio/41cs.mp3"},
					],
				bing:[
					{text:"/m/",aurl:"http://120.27.207.15:9000/baozou-word/audio/43cs.mp3"},
					{text:"/n/",aurl:"http://120.27.207.15:9000/baozou-word/audio/44cs.mp3"},
					{text:"/ŋ/",aurl:"http://120.27.207.15:9000/baozou-word/audio/45cs.mp3"},],
				ban:[
					{text:"/w/",aurl:"http://120.27.207.15:9000/baozou-word/audio/48cs.mp3"},
					{text:"/j/",aurl:"http://120.27.207.15:9000/baozou-word/audio/47cs.mp3"},],
				qita:[
					{text:"/h/",aurl:"http://120.27.207.15:9000/baozou-word/audio/28cs.mp3"},
					{text:"/r/",aurl:"http://120.27.207.15:9000/baozou-word/audio/39cs.mp3"},
					{text:"/l/",aurl:"http://120.27.207.15:9000/baozou-word/audio/46cs.mp3"},
					],
			}
		},
		methods: {
			tapyin(item,index,type){
				this.tindex1 = -1
				this.tindex2 = -1
				this.tindex3 = -1
				this.tindex4 = -1
				this.tindex5 = -1
				this.tindex6 = -1
				this.tindex7 = -1
				this.tindex8 = -1
				this.tindex9 = -1
				this.tindex10 = -1
				if(type==1){
					this.tindex1=index
				}else if(type==2){
					this.tindex2=index
				}else if(type==3){
					this.tindex3=index
				}else if(type==4){
					this.tindex4=index
				}else if(type==5){
					this.tindex5=index
				}else if(type==6){
					this.tindex6=index
				}else if(type==7){
					this.tindex7=index
				}else if(type==8){
					this.tindex8=index
				}else if(type==9){
					this.tindex9=index
				}else if(type==10){
					this.tindex10=index
				}
				this.voice(item.aurl)
			},
		}
	}
</script>

<style>
	page{
		background: #F3F5F7;
	}
	.size28{
		width:120rpx
	}
	.active{
		background: rgba(255,46,83,0.06);
		color: #FD2F55;
	}

</style>
